<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" @close="resetForm" width="85rem !important">
      <div class="content">
        <div class="top">
          <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline form">
            <el-form-item label="">
              <el-select v-model="searchForm.row" placeholder="请选择排" @change="onSubmit" clearable
                :popper-append-to-body="false">
                <el-option v-for="item in rowArray" :key="item.row" :label="item.row" :value="item.row"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input maxlength="50" placeholder="请输入鱼池名称" v-model="searchForm.name" clearable
                :popper-append-to-body="false"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" icon="el-icon-search" style="font-size: 2.19rem;" @click="onSubmit">搜索</el-button>
          <el-button @click="reset" class="btn">重置</el-button>
        </div>
        <div class="main">
          <div class="auto-box">
            <div class="item" v-for="(item, index) in fishpondArray" :key="index" @click="handleSelect(item, index)"
              :style="activeIndex == index ? 'background: #FFD953;' : ''">
              {{ item.name }}
            </div>
          </div>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('formName')" class="btn">取 消</el-button>
          <el-button class="btn-light-blue btn" @click="submitForm">确 定</el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { getObjFishpondList, getObjFishpondRows, saveDataHisFishpondUserSearch } from "@/api/transfer";

export default {
  components: {
  },
  props: {
    inOutType: {
      type: Number,
      default: 0,
    },
    companyId: {

      default: "",
    },
    baseId: {

      default: "",
    },
    bindIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {
        // 表单字段
        pageNum: 1,
        pageSize: 10000,
        companyId: "",
        baseId: "",
        row: "",
        name: "",
      },
      ruleForm: {
        // 表单字段
        companyId: "",
        baseId: "",
        inOutType: 0,
        type: 0,
        outFishpondIds: "",
        inFishpondIds: "",
      },
      addEditIsDialog_c: false, // 弹窗是否显示
      fishpondArray: [], //鱼池查询集合
      chooseFishpondArray: [], //选中鱼池
      rowArray: [], // 排集合
      activeIndex: -1,
    };
  },
  watch: {
    bindIsDialog(val) {
      this.addEditIsDialog_c = val;
      if (this.addEditIsDialog_c) {
        this.searchForm.companyId = this.companyId;
        this.searchForm.baseId = this.baseId;
        this.ruleForm.companyId = this.companyId;
        this.ruleForm.baseId = this.baseId;
        this.ruleForm.inOutType = this.inOutType;
        this.getList();
      }
    },
  },
  methods: {
    // 查询
    onSubmit() {
      // this.pagination.pageNum = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10000,
        companyId: "",
        baseId: "",
        row: "",
        name: "",
      };
      this.searchForm.companyId = this.companyId;
      this.searchForm.baseId = this.baseId;
      this.ruleForm.companyId = this.companyId;
      this.ruleForm.baseId = this.baseId;
      this.ruleForm.inOutType = this.inOutType;
      this.onSubmit();
    },
    // 查询列表
    getList() {
      getObjFishpondList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.fishpondArray = res.data.data;

          this.getObjFishpondRows();
        }
      });
    },
    // 选择绑定
    handleSelect(item, index) {
      this.activeIndex = index;
      this.$emit('selectFishData', item);
      this.$parent.closeBind();
    },
    // // 提交
    // submitForm() {
    //       if(this.ruleForm.inOutType == 1){
    //           this.fishpondArray.forEach((item)=>{
    //           if(item.isSelected){
    //             this.ruleForm.outFishpondIds += item.id + ',';
    //           }
    //         })
    //         // 删除最后一个逗号
    //         this.ruleForm.outFishpondIds = this.ruleForm.outFishpondIds.substring(0,this.ruleForm.outFishpondIds.length - 1);
    //         // 删除某个属性
    //         delete this.ruleForm.inFishpondIds;
    //       }else{
    //           this.fishpondArray.forEach((item)=>{
    //           if(item.isSelected){
    //             this.ruleForm.inFishpondIds += item.id + ',';
    //           }
    //         })
    //         // 删除最后一个逗号
    //         this.ruleForm.inFishpondIds = this.ruleForm.inFishpondIds.substring(0,this.ruleForm.inFishpondIds.length - 1);
    //         // 删除某个属性
    //         delete this.ruleForm.outFishpondIds;
    //       }
    //     saveDataHisFishpondUserSearch(this.ruleForm).then((res) => {
    //         if (res.code == 200) {
    //           this.$message({
    //             type: "success",
    //             message: res.msg,
    //           });

    //           // 关闭弹窗
    //           this.$parent.closeBind();
    //           // 刷新列表
    //           this.$parent.getList();
    //         }
    //       });
    // },
    // 取消
    resetForm() {
      this.$parent.closeBind();
    },
    // 获取排列表
    getObjFishpondRows() {
      getObjFishpondRows(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.rowArray = res.data;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__close {
  display: none !important;
}

/deep/.el-input__suffix {
  right: -18.642857rem;
}

.content {
  width: 100% !important;
  height: 56rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;

  .top {
    width: 95%;
    height: 5rem;
    display: flex;
    align-items: center;
    padding-left: 3.5rem;
    font-size: 2.26rem;

    .form {
      /deep/.el-form-item__content {
        width: 22rem;
      }

      /deep/.el-form-item {
        margin-bottom: 0;
      }

      /* selecte 框的高度设置，默认是 40px*/
      /deep/ .el-input__inner {
        height: 4.5rem;
        width: 22rem;
        font-size: 1.86rem;
        // padding-left: 2rem;
      }

      ::v-deep .el-select-dropdown__empty {
        padding: 0.814286rem 3.3rem;
        font-size: 2rem;
      }

      ::v-deep .el-select-dropdown__list {
        .el-select-dropdown__item {
          font-size: 2rem;
          height: 3.428571rem;
          line-height: 3.428571rem;
        }
      }
    }
  }

  .main {
    width: 96%;
    height: 50.57rem;
    display: flex;

    .auto-box {
      width: 98%;
      height: 90%;
      margin-top: 3rem;
      max-height: 93%;
      // border: 1px solid red;
      display: flex;
      flex-flow: wrap;
      // justify-content: space-around;
      overflow: auto;

      .item {
        width: 11.5rem;
        height: 11.5rem;
        line-height: 11.5rem;
        margin-left: 4.5rem;
        margin-right: 2.5rem;
        margin-bottom: 1rem;
        margin-top: 1.5rem;
        color: #333333;
        font-size: 1.86rem;
        border-radius: 50%;
        border: 0.25rem solid #979797;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}

.btn {
  width: 8.65rem;
  height: 4.48rem;
  font-size: 2.19rem;
}</style>
